<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>
    <div class="app-container margin-content padding-content">
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="120px">
        <el-row :gutter="48">
          <el-col :sm="24" :md="8" v-if="isAdmin">
            <el-form-item label="所属码头" prop="portId">
              <port-tree-select :handle-selected="handleSelected" :keyValue="'form1'"
                                style="width:100%"></port-tree-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-form-item label="集装箱/提单号" prop="recordNo">
              <el-col :sm="6" :md="6" style="padding:0">
                <el-select style="width:98%;margin-right:5px;float:left" v-model="dataForm.type">
                  <el-option v-for="item in options" :label="item.label" :value="item.value"
                             :key="item.label"></el-option>
                </el-select>
              </el-col>
              <el-col :sm="18" :md="18" style="padding:0">
                <el-input placeholder="集装箱号" v-model="dataForm.recordNo" clearable
                          style="width:100%"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="加锁状态" prop="lockStatus">
              <el-select style="width:100%" v-model="dataForm.lockStatus">
                <el-option v-for="item in lockOptions" :label="item.label" :value="item.value"
                           :key="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--<el-col :sm="24" :md="4" style="text-align:right">-->
          <!--<el-button type="primary" @click="getLockList">查询</el-button>-->
          <!--</el-col>-->
        </el-row>

        <div style="text-align: right">
          <el-button type="primary" @click="getLockList">查询</el-button>
        </div>
        <!--<el-form-item label="加锁下达时间" prop="time" class="fl">-->
        <!--<el-date-picker-->
        <!--type="daterange"-->
        <!--range-separator="-"-->
        <!--start-placeholder="开始日期"-->
        <!--end-placeholder="结束日期"-->
        <!--unlink-panels-->
        <!--value-format="yyyy-MM-dd"-->
        <!--style="width: 300px"></el-date-picker>-->
        <!--</el-form-item>-->

        <!--<div style="text-align: right;width:100%;clear:both;">-->
        <!--<el-button type="primary" @click="getLockList">查询</el-button>-->
        <!--&lt;!&ndash;<el-button>重置</el-button>&ndash;&gt;-->
        <!--</div>-->
      </el-form>
    </div>


    <div class="app-container margin-content padding-content">
      <div>
        <div class="clearfix">
          <div class="btn-wrapper fl">
            <el-button icon="el-icon-edit" type="primary" @click="handleNewDirective" v-permission="[0,270,282,283]">
              新建加锁下达
            </el-button>
            <el-button icon="el-icon-edit" type="default" @click="toggleLock" v-permission="[0,270,282,283]">
              {{dataForm.lockStatus === 0 ? '批量加锁' : '批量解锁'}}
            </el-button>
            <!--<el-button icon="el-icon-delete" type="danger" @click="delUsers">删除</el-button>-->
          </div>
        </div>
      </div>
      <el-table :key="tableKey" :data="tableData" v-loading="loading" element-loading-text="正在加载..."
                style="width: 100%;" @selection-change="handleSelectionChange" :min-height="scrollHeight">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="集装箱号/提单号" width="120" fixed="left">
          <template slot-scope="scope">
            {{scope.row.recordNo}}
          </template>
        </el-table-column>
        <el-table-column label="作业时间" width="130">
          <template slot-scope="scope">
            {{scope.row.activityDateDesc}}
          </template>
        </el-table-column>
        <el-table-column label="堆场代码">
          <template slot-scope="scope">
            {{scope.row.location}}
          </template>
        </el-table-column>
        <el-table-column label="进出口标识">
          <template slot-scope="scope">
            {{scope.row.ieFlag | ieFlagFilter}}
          </template>
        </el-table-column>
        <el-table-column label="加锁下达时间" width="130">
          <template slot-scope="scope">
            {{scope.row.createdtimeDesc}}
          </template>
        </el-table-column>
        <el-table-column label="加锁人">
          <template slot-scope="scope">
            {{scope.row.operatorName}}
          </template>
        </el-table-column>
        <el-table-column label="所属码头">
          <template slot-scope="scope">
            {{scope.row.portName}}
          </template>
        </el-table-column>
        <el-table-column label="状态" fixed="right">
          <template slot-scope="scope">
            <span v-if="scope.row.lockStatus !== 1"><el-tag type="warning">未加锁</el-tag></span>
            <span v-if="scope.row.lockStatus === 1"><el-tag type="success">已加锁</el-tag></span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" v-if="hasPermission([0,270,282,283])">
          <template slot-scope="scope">
            <!--<a href="javascript:void(0)" @click="handleEdit(scope.row)">修改</a>-->
            <a href="javascript:void(0)" v-if="scope.row.lockStatus !== 1"
               @click="toggleLock(scope.row)">加锁</a>
            <a href="javascript:void(0)" v-if="scope.row.lockStatus === 1"
               @click="toggleLock(scope.row)">解锁 </a>
            <!--<divider type="vertical"></divider>-->
            <!--<a href="javascript:void(0)" @click="delUsers(scope.row.id)">删除</a>-->
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container align-right" v-show="tableData.length > 0">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="dataForm.pageNum" :page-sizes="pageSizes" :page-size="dataForm.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <directive-dialog ref="directiveDialog" :callBack="dialogCallback"></directive-dialog>
  </div>
</template>

<script>
  import { page } from '@/utils/page'
  import DirectiveDialog from './components/newDirectiveDialog'
  import { getLockList, updateLockStatus } from '@/api/eLock'
  import PortTreeSelect from '@/components/PortTreeSelect'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import { hasPermission } from '@/utils/permission' //判断是否有权限，返回bollean值


  export default {
    name: 'elLock',
    components: {
      DirectiveDialog, PortTreeSelect
    },
    directives: {permission},
    data() {
      return {
        hasPermission: hasPermission,
        tableKey: 0,
        total: 0,
        tableData: [],
        tableSelection: [],
        loading: false,
        pageSizes: page.pageSizes,
        isAdmin: this.$store.getters.isAdmin,
        scrollHeight: null,
        dataForm: {
          portId: null,
          lockStatus: 0,
          type: 1,
          recordNo: null,
          pageNum: 1,
          pageSize: page.pageSize
        },
        options: [
          {label: '集装号', value: 1},
          {label: '散货提单号', value: 2}
        ],
        lockOptions: [
          {label: '已加锁', value: 1},
          {label: '未加锁', value: 0}
        ]
      }
    },
    created(){
      if (!this.isAdmin) {
        this.getLockList()
      }
      this.tableResize()
    },
    methods: {
      tableResize(){
        const _height = 440
        this.scrollHeight = document.body.scrollHeight - _height
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - _height
        }
      },
      handleSelectionChange(val){
        this.tableSelection = val
      },
      handleSelected(node){
        this.dataForm.portId = node.id
      },
      handleSizeChange(val) {
        this.dataForm.pageSize = val
        this.getLockList()
      },
      handleCurrentChange(val) {
        this.dataForm.pageNum = val
        this.getLockList()
      },
      handleNewDirective(){
        this.$refs.directiveDialog.handleCreate()
      },
      dialogCallback(res){
        console.log(res)
      },
      handleEdit(obj){
        this.$refs.directiveDialog.handleEdit(obj)
      },
      getLockList(){
        getLockList(this.dataForm).then(res => {
          res = res.data
          this.tableData = res.data.dataList
          this.total = res.data.total
        })
      },
      toggleLock(obj){
        let ids = [], _lockStatus
        if (this.dataForm.lockStatus === 1) {
          _lockStatus = 0
        } else {
          _lockStatus = 1
        }
        if (obj.lockStatus !== undefined) {
          ids = obj.id
        } else {
          if (this.tableSelection.length !== 0) {
            this.tableSelection.forEach(item => {
              ids.push(item.id)
            })
            ids = ids.join(',')
          } else {
            this.$message({showClose: true, message: '至少选择一条', type: 'warning'});
            return false
          }
        }
        this.$confirm('此操作将进行' + (this.lockStatus === 1 ? '加锁' : '解锁') + '操作，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateLockStatus({
            ids: ids,
            status: _lockStatus
          }).then(res => {
            this.$message({showClose: true, message: '操作成功', type: 'success'});
            this.getLockList()
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped="scope">

</style>
